// 7.08 Tình trạng phòng giường
import { Avatar, List, message } from "antd";
import VirtualList from "rc-virtual-list";
import React, { useEffect, useState } from "react";
import { BasicForm, useForm, FormSchema } from "@/components/Form";
import { useTranslation } from "react-i18next";
import "./index.less";
interface UserItem {
	email: string;
	gender: string;
	name: {
		first: string;
		last: string;
		title: string;
	};
	nat: string;
	picture: {
		large: string;
		medium: string;
		thumbnail: string;
	};
}
const fakeDataUrl = "https://randomuser.me/api/?results=20&inc=name,gender,email,nat,picture&noinfo";
const ContainerHeight = 400;
export default function index() {
	const { t } = useTranslation();
	const [data, setData] = useState<UserItem[]>([]);

	const appendData = () => {
		fetch(fakeDataUrl)
			.then(res => res.json())
			.then(body => {
				setData(data.concat(body.results));
				message.success(`${body.results.length} more items loaded!`);
			});
	};

	useEffect(() => {
		appendData();
	}, []);

	const onScroll = (e: React.UIEvent<HTMLElement, UIEvent>) => {
		if (e.currentTarget.scrollHeight - e.currentTarget.scrollTop === ContainerHeight) {
			appendData();
		}
	};
	const formSchemaTop: FormSchema[] = [
		{
			label: t("felix_ui.department"),
			field: "department",
			component: "Select",
			componentProps: {
				options: [
					{
						label: t("暂无字典接口"),
						value: 0
					}
				]
			}
		},
		{
			label: t("felix_ui.operationRoom"),
			field: "operationRoom",
			component: "Select",
			componentProps: {
				options: [
					{
						label: t("暂无字典接口"),
						value: 0
					}
				]
			}
		}
	];
	const [formTop] = useForm({
		schemas: formSchemaTop,
		showActionButtonGroup: true,
		showAdvancedButton: false,
		baseColProps: { span: 6 },
		// actionColOptions: { span: 18 },
		labelWidth: 120
	});
	return (
		<div className="page block">
			<BasicForm register={formTop} style={{ margin: "10px 0" }}></BasicForm>
			<List>
				<VirtualList data={data} height={ContainerHeight} itemHeight={47} itemKey="email" onScroll={onScroll}>
					{(item: UserItem) => (
						<List.Item key={item.email}>
							<List.Item.Meta
								avatar={<Avatar src={item.picture.large} />}
								title={<a href="https://ant.design">{item.name.last}</a>}
								description={item.email}
							/>
							<div>Content</div>
						</List.Item>
					)}
				</VirtualList>
			</List>
		</div>
	);
}
